<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" size="small">
        <el-form-item>
          <BackButton pages="/LockerList" />
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="handleAdd"
            v-show="permission.add"
          >新增格口尺寸</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="table"
        :height="height-170"
        :data="tableData"
        :header-cell-style="{background:'#FAFAFA',color:'#606266'}"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column prop="id" width="100" label="序号"></el-table-column>
        <el-table-column prop="name" label="格口尺寸名称"></el-table-column>
        <el-table-column prop="remark" :show-overflow-tooltip="tooltip" label="备注"></el-table-column>
        <el-table-column prop="tag" :show-overflow-tooltip="tooltip" label="识别标记">
          <template slot-scope="scope">
            <el-tag size="small">{{scope.row.tag}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="put_price" :show-overflow-tooltip="tooltip" label="投件价格/元"></el-table-column>
        <el-table-column prop="pic_url" width="159" label="格口图片" align="center">
          <template slot-scope="scope">
            <div class="img" style="cursor:pointer">
              <viewer>
                <img
                  :src="scope.row.pic_url"
                  alt
                  :onerror="errImg"
                  title="查看高清图片"
                  style="width: 40px;height: 40px;border-radius: 50%"
                />
              </viewer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="box_type_name" :show-overflow-tooltip="tooltip" label="格口类型名称"></el-table-column>
        <el-table-column prop="is_used" :show-overflow-tooltip="tooltip" label="已启用的格口数量"></el-table-column>
        <el-table-column prop="no_used" :show-overflow-tooltip="tooltip" label="未启用的格口数量"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>

        <el-table-column fixed="right" label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
              v-show="permission.edit"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row.id)"
              v-show="permission.del"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>-->

      <!-- 商家添加和商家编辑 -->
      <el-dialog
        width="550px"
        :title="type==='add'?'添加格口尺寸':'修改格口尺寸'"
        :visible.sync="visible"
        top="2vh"
        @close="onCancel('ruleForm')"
        custom-class="custom_drawer"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          size="mini"
          label-width="120px"
          class="form-drawer__main"
        >
          <el-form-item label="格口尺寸" prop="name" style="margin-bottom:30px;">
            <el-select
              v-model="ruleForm.name"
              @change="changeName"
              clearable
              filterable
              placeholder="请选择格口尺寸"
              style="width:320px;"
            >
              <el-option label="大格口" value="大格口"></el-option>
              <el-option label="中格口" value="中格口"></el-option>
              <el-option label="小格口" value="小格口"></el-option>
              <el-option label="微格口" value="微格口"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="识别标记" prop="tag" style="margin-bottom:30px;">
            <el-input clearable v-model="ruleForm.tag" disabled placeholder="请选择格口尺寸"></el-input>
          </el-form-item>

          <el-form-item label="格口类型名称" prop="box_type_name" style="margin-bottom:30px;">
            <el-input clearable v-model="ruleForm.box_type_name" placeholder="请输入格口类型名称"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remark" style="margin-bottom:30px;">
            <el-input clearable v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
          </el-form-item>

          <el-form-item label="投件价格" prop="put_price" style="margin-bottom:30px;">
            <el-input
              @mousewheel.native.prevent
              clearable
              @blur="clearMinus($event,'put_price')"
              type="number"
              v-model.number="ruleForm.put_price"
              placeholder="请输入价格"
            >
              <span slot="append">元</span>
            </el-input>
          </el-form-item>

          <el-form-item label="格口图片" prop="pic_url" style="margin-bottom:30px;">
            <UploadImage @getImgSrc="getImgSrc" :imageUrl.sync="ruleForm.pic_url" />
          </el-form-item>

          <el-form-item label="格口描述" prop="content" style="margin-bottom:30px;">
            <el-input
              type="textarea"
              placeholder="请输入格口描述"
              v-model="ruleForm.content"
              :rows="4"
              maxlength="200"
              show-word-limit
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="onCancel('ruleForm')" size="small">取 消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="onConfirm('ruleForm')"
            :loading="confirmLoading"
          >{{ confirmLoading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {MAIN } from "../../utils/api";
import BackButton from "../../components/BackButton";
import UploadImage from "../../components/UploadImage";

export default {
  name: "SizeList",
  props: ["height"],

  data() {
    return {
      tableData: [],
      locker_id: "", //路由传值 菜品id
      merchant_id: "", //路由传值 商家id
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      errImg: 'this.src="' + require("../../../static/img/user.png") + '"',
      permission: {
        add: false,
        edit: false,
        del: false
      }, //权限
      //编辑弹窗
      visible: false,
      confirmLoading: false,
      type: "",
      currentRow: {}, //当前行数据信息
      ruleForm: {
        name: "",
        remark: "",
        tag: "",
        put_price: "",
        box_type_name: "",
        pic_url: "",
        content: ""
      }, //添加和修改的表单
      rules: {
        tag: [{ required: true, message: "请选择识别标记", trigger: "change" }],
        pic_url: [
          { required: true, message: "请选择格口图片", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入格口尺寸名称", trigger: "blur" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        put_price: [
          { required: true, message: "请输入投件价格", trigger: "blur" }
        ],
        box_type_name: [
          { required: true, message: "请输入格口类型名称", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入格口描述", trigger: "blur" }
        ]
      },
      sku: {}
    };
  },
  components: {
    BackButton,
    UploadImage
  },
  created() {
    this.locker_id = this.$route.query.locker_id;
  },
  mounted() {
    this.getResource();
  },
  methods: {
    getResource() {
      // console.log(this.$route.name);
      this.loading = true;
      const userinfo = JSON.parse(sessionStorage.getItem('userInfo')); //解密,获取用户登录信息
      let arr = userinfo.menu_id.split(",");
      // console.log(arr)
      // 新增柜口尺寸 60
      // 修改柜口尺寸 61
      // 删除柜口尺寸 62
      if (arr.indexOf("60") > -1) {
        this.permission.add = true;
      }
      if (arr.indexOf("61") > -1) {
        this.permission.edit = true;
      }

      if (arr.indexOf("62") > -1) {
        this.permission.del = true;
      }

      this.getData();
    },
    //清除输入框负数
    clearMinus(e, type) {
      let boolean = new RegExp("^[0-9][0-9.]*$").test(e.target.value);
      if (!boolean) {
        e.target.value = "";
        if (type === "put_price") this.ruleForm.put_price = "";
      }
    },
    //   菜品格口尺寸下拉列表
    // skuSelects() {
    //   let params = {
    //     merchant_id: this.merchant_id
    //   };
    //   this.postRequest(skuSelects, params, MAIN).then(res => {
    //     if (res.code == 200) {
    //       this.sku = res.data;
    //     }
    //   });
    // },
    // 选择下拉
    changeName(e) {
      if (e == "大格口") {
        this.ruleForm.tag = "big";
      } else if (e == "中格口") {
        this.ruleForm.tag = "middle";
      } else if (e == "小格口") {
        this.ruleForm.tag = "small";
      } else if (e == "微格口") {
        this.ruleForm.tag = "micro";
      }
      console.log(e);
    },
    // 格口图片
    getImgSrc(e) {
      this.ruleForm.pic_url = e;
    },
    //获取初始数据
    getData() {
      this.loading = true;
      let params = {
        locker_id: this.locker_id,
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      };
      this.postRequest(sizeList, params, MAIN).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data;
          this.loading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },

    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },
    //新增
    handleAdd() {
      this.type = "add";
      this.currentRow = {};
      this.visible = true;
    },
    //编辑
    handleEdit(row) {
      this.type = "edit";
      this.currentRow = row;
      this.visible = true;
      this.ruleForm = {
        name: row.name,
        remark: row.remark,
        tag: row.tag,
        put_price: row.put_price,
        box_type_name: row.box_type_name,
        pic_url: row.pic_url,
        content: row.content
      };
    },
    //删除
    handleDel(id) {
      let parm = {
        id: id
      };
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.postRequest(sizeDel, parm, MAIN).then(res => {
          // console.log(res);
          if (res.code == 200) {
            this.$notify({
              title: "删除成功",
              message: res.msg,
              type: "success"
            });
            this.getData();
          }
        });
      }).catch(() => {});
    },

    onConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          // setTimeout(() => this.onCancel(formName), 1000);
          if (this.type == "add") {
          } else if (this.type == "edit") {
          }
        } else {
          return false;
        }
      });
    },
    // 添加
    sizeAdd() {
      let params = {
        locker_id: this.locker_id,
        name: this.ruleForm.name,
        remark: this.ruleForm.remark,
        tag: this.ruleForm.tag,
        put_price: this.ruleForm.put_price,
        box_type_name: this.ruleForm.box_type_name,
        pic_url: this.ruleForm.pic_url,
        content: this.ruleForm.content
      };

      this.postRequest(sizeAdd, params, MAIN).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$notify({
            title: "添加成功",
            message: res.msg,
            type: "success"
          });
        }
        this.onReset();
        this.getData();
      });
    },
   
    onCancel(formName) {
      this.$refs[formName].resetFields();
      this.onReset();
    },
    //清空重置表单
    onReset() {
      this.visible = false;
      this.confirmLoading = false;
      this.ruleForm = {
        name: "",
        remark: "",
        tag: "",
        put_price: "",
        box_type_name: "",
        pic_url: "",
        content: ""
      };
    }
  }
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
</style>
